import React from 'react';
import ImageLazy from './commons/ImageLazy';
import NavLink from './commons/NavLink';
import { connect } from 'react-redux'
import {itemClass_show,mall_them_hos_servItem} from '../actions';
import {getServImg,getDocImg} from '../actions/ActionTypes';

const order_header = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/order_header.jpg');
const order_nav_toggle = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/order_toggle.png');
const mall_vip = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/mall_vip.png');

let mydefault = React.createClass({
  componentWillMount:function(){

  },
  componentDidMount:function(){
    let {dispatch} = this.props;
    dispatch(itemClass_show());
    dispatch(mall_them_hos_servItem({pageSize:20,pageNo:1}))
    let top_w = $('.order_nav_wrapper .top').width(),
        state = 'false',
        up_height = 0;
    $('.order_nav_wrapper .top').on('click','li',function(){
      $('.order_nav_wrapper .top li').find('a').removeClass('active')
      $(this).find('a').addClass('active');
      $('.order_nav_wrapper').removeClass('active');
      let _this = $(this),
          this_oft_l = 0;
      if(state == 'true'){
        if($(this).offset().left +$('.order_nav_wrapper .top').scrollLeft() > top_w){
          this_oft_l = _this.offset().left + $('.order_nav_wrapper .top').scrollLeft();
        }else{
          this_oft_l = _this.offset().left;
        }
        $('.order_nav_wrapper .top').scrollLeft(this_oft_l - 30);
      }
      $('.order_nav_wrapper .toggle').attr('data-state','false');
      $('.order_nav_wrapper').css({'height':'0.9rem'})
      state = 'false';
      if($(this).attr('data-icId') == 0){
        dispatch(mall_them_hos_servItem({pageSize:20,pageNo:1}))
      }else{
        dispatch(mall_them_hos_servItem({icId:$(this).attr('data-icId'),pageSize:20,pageNo:1}))
      }
    })

    $('.order_nav_wrapper .toggle').tap(function(){

      if(state == 'false'){
        $('.order_nav_wrapper').css({'height':'auto'})
        $('.order_nav_wrapper').addClass('active');
        state = 'true';
        $(this).attr('data-state','true');
        if(up_height == 0)return false;
        $('.order_nav_wrapper').css('height',up_height)
      }else{
        $('.order_nav_wrapper').css('height',$('.order_nav_wrapper').height())
        up_height = $('.order_nav_wrapper').height();
        $('.order_nav_wrapper').css({'height':'0.9rem'})
        $('.order_nav_wrapper').removeClass('active');
        state = 'false';
        $(this).attr('data-state','false');
      }
    })
  },
  render:function(){
    let itemClass_show = this.props.itemClass_show || [],
        mall_them_hos_servItem = this.props.mall_them_hos_servItem || [];
    return(
      <div className="order">
        <div className="contant">
          <div className="order_nav">
            <div className="order_nav_wrapper">
              <em className="toggle" data-state="false"><ImageLazy style={{"width":'0.28rem'}} src={order_nav_toggle}/></em>
              <div className="top clearfix">
                <div className="wrapper">
                  <div className="all_tit">全部服务</div>
                  {/* <a href="javascript:void(0)" className="all active">全部</a> */}
                  <ul>
                    <li data-icId="0"><a href="javascript:void(0)" className="active">全部</a></li>
                    {
                      itemClass_show.map(function(item,index){
                        return(
                          <li data-icId={item.icId}><a href="javascript:void(0)">{item.icName}</a></li>
                        )
                      })
                    }
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div className="item_wrapper">
          {
            mall_them_hos_servItem.map(function(item,index){
              let imgSrc = getServImg(item.itemImage,'_750_480',item.hospitalId,item.itemId),
                  docImg = getDocImg(item.doctorPic,'_200_200',item.hospitalId,item.doctorId)
              return(
                <NavLink to={"/servItem/det/" + item.itemId} className="item">
                  <ImageLazy src={imgSrc} className="itemImage" />
                  <div className="subtitle">{item.subtitle}</div>
                  <div className="txt box">
                    <div className="left">
                      <em className="docImg" style={{"background-image":'url('+ docImg + ')'}}></em>
                      <div>
                        <h4 className="txt_ellip">{item.doctorName} {item.subtitle}</h4>
                        <small className="txt_ellip">{item.hospitalName} <ImageLazy src={mall_vip} style={{width:".28rem"}} /></small>
                      </div>
                    </div>
                    <div className="right">
                      <span>&yen; {item.sellingPrice}</span>
                    </div>
                  </div>
                </NavLink>
              )
            })
          }
            {/* <NavLink to="/servItem/det/5" className="item">
              <ImageLazy src="http://image.meirenguvip.com/hospital/49/item/11/1484827400180_750_480.jpg" />
              <div className="txt box">
                <div className="left">
                  <h4 className="txt_ellip">自体脂肪编码移植丰全面</h4>
                  <small className="txt_ellip">打造精致娇小甜心脸</small>
                </div>
                <div className="right">
                  <span>&yen; 10240</span>
                </div>
              </div>
            </NavLink> */}
          </div>
        </div>
      </div>
    )
  }
})

let mapStateToProps = (state) => {
  return{
    itemClass_show:state.mall.itemClass_show,
    mall_them_hos_servItem:state.mall.mall_them_hos_servItem
  }
}

export default connect(mapStateToProps)(mydefault)
